<template>
	<view class="orders page bgf5 c00">
		<view class="tabbox flex flexC flexB c66 fs15 px10 pb8 bgff">
			<view class="item py8" @click="switchTab(index)" v-for="(item,index) in tabs" :key="index">
				<text class="p8" :class="index==currentTab?'active':''">{{item}}</text>
				<image v-if="currentTab == index" class="icon" src="/static/img/icon/sel.png" mode="widthFix"></image>
			</view>
		</view>


		<view class="flex flexC aliC c66 fs15 mx14 mt10 tab">
			<view @click="clickTab(0)" class="flex1 py9" :class="tabIndex == 0 ? 'active' : ''">棋牌
			</view>
			<view @click="clickTab(1)" class="flex1 py9" :class="tabIndex == 1 ? 'active atv' : ''">台球
			</view>
		</view>

		<scroll-view scroll-y class="list boxS bgf5 c33 px14" @scrolltolower="nextPage">
			<view class="item py14 px9 bgff mb8 boxS r10" v-if="tabIndex == 0" v-for="(item,index) in list" :key="index" @click="detail(item)">
				<view class="flex flexC">
					<view class="flex1 fs15">
						<text>{{item.shop_name}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
					<text class="fs13 status">{{item.status_txt}}</text>
				</view>
				<view class="flex flexS mt12">
					<image class="cover r10" src="https://resouce.51fxyf.com/uploads/20240413/5d46a7ab3a61436bfdb07b7b616285ac.jpg" mode="aspectFill"></image>
					<view class="flex1 fs12 ml15">
						<view class="flex flexC fs14 mb10">
							<text class="flex1">房间号</text>
							<text>{{item.room_name}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb2">
							<text class="flex1">订单时间</text>
							<text>{{item.create_time_text}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb2">
							<text class="flex1">开始时间</text>
							<text>{{item.book_start}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb5">
							<text class="flex1">结束时间</text>
							<text>{{item.book_end}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb8" @click="callTel(item.shop_mobile)">
							<text class="flex1 bold6">商家电话</text>
							<view class="bgf5 r2 mr3 flex flexC">
								<image class="w17" src="/static/img/icon/dh.png" mode="aspectFill"></image>
								<text class="c1b ml26">{{item.shop_mobile}}</text>
							</view>
							<!-- <view>
								<image src="/static/img/icon/dh.png" mode="aspectFit"></image>
								<text>{{item.shop_mobile}}</text>
							</view>> -->
						</view>
						<view class="flex flexC">
							<text>订单金额：</text>
							<text class="fs10 price">￥</text>
							<text class="flex1 price fs13 bold6">{{item.amount}}</text>
							<view  @click.stop="clickComment(item)" v-if="(item.status == 'done' && item.pay_amount == 0 && item.dou_code != '' && item.is_comment != 1) ||( item.status == 'done' && item.is_comment != 1 && item.pay_amount == 0 &&item.mt_code != '')" class="r40 btn fs14 px9 py4">好评返时长</view>
							<view @click.shop="againQp(item)" v-else class="r40 btn fs14 px9 py4">再来一单</view>
							
						</view>
						
					</view>
				</view>
			</view>
			
			
			
			<view  v-else class="item py14 px9 bgff mb8 boxS r10" v-for="(item,index) in list" :key="index" @click="clickDetail(item)">
				<view class="flex flexC">
					<view class="flex1 fs15">
						<text>{{item.shop_name}}</text>
						<text class="arrowR dinline ml3"></text>
					</view>
					<text class="fs13 status">{{item.status_txt}}</text>
				</view>
				<view class="flex flexS mt12">
					<image class="cover2 r10" src="https://resouce.51fxyf.com/uploads/20240413/5d46a7ab3a61436bfdb07b7b616285ac.jpg" mode="aspectFill"></image>
					<view class="flex1 fs12 ml15">
						<view class="flex flexC fs14 mb10">
							<text class="flex1">桌号</text>
							<text>{{item.table_name}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb2">
							<text class="flex1">订单时间</text>
							<text>{{item.create_time_text}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb2">
							<text class="flex1">开始时间</text>
							<text>{{item.book_start}}</text>
						</view>
						<view class="flex flexC fs13 c66 mb5">
							<text class="flex1">结束时间</text>
							<text>{{item.book_end}}</text>
						</view>
						
						<view class="flex flexC fs13 c66 mb8" @click="callTel(item.shop_mobile)">
							<text class="flex1 bold6">商家电话</text>
							<view class="bgf5 r2 mr3 flex flexC">
								<image class="w17" src="/static/img/icon/dh.png" mode="aspectFill"></image>
								<text class="c1b ml18">{{item.shop_mobile}}</text>
							</view>
						</view>
						<view class="flex flexC">
							<text>订单金额：</text>
							<text v-if="item.status == 'doing'" class="flex1 price fs13 bold6">计费中</text>
							<text v-else class="flex1 price fs13 bold6">￥{{item.amount}}</text>
							<view  @click.stop="clickComment2(item)" v-if="(item.status == 'done' && item.pay_amount == 0 && item.dou_code != '' && item.is_comment != 1) ||( item.status == 'done' && item.is_comment != 1 && item.pay_amount == 0 &&item.mt_code != '')" class="r40 btn fs14 px9 py4">好评券返时长</view>
							<view @click.stop="againTq(item)" v-else class="r40 btn fs14 px9 py4">再来一单</view>
						</view>
					</view>
				</view>
			</view>
	
		</scroll-view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: ['全部', '待消费', '消费中', '已完成'],
				currentTab: 0,
				page: 1,
				status: '',
				list: [],
				isnodata: false,
				isLastPage: false,
				tabIndex: 0,
				currentItem: null
			};
		},
		onLoad() {


		},
		onTabItemTap: function(e) {
			console.log(e);
			uni.vibrateShort({
				success: function () {
					console.log('success');
				}
			});
		},
		onShow() {
			this.page = 1;
			this.isnodata = false;
			this.isLastPage = false;
			this.list = [];
			var token = uni.getStorageSync("token");
			if (token != "") {
				if (this.tabIndex == 0) {
					this.getList();
				} else {
					this.getTableList();
				}
			}

		},
		methods: {
			callTel(val){
				uni.showModal({
					content:'是否拨打商家电话',
					success(res) {
						if(res.confirm){
							uni.makePhoneCall({
								phoneNumber: val, // 要拨打的电话号码
								success: function () {
								  console.log('成功调起拨号盘');
								},
								fail: function (err) {
								  console.error('拨打电话失败', err);
								}
							});
						}
					}
				})
			},
			
			againQp(item){
				uni.navigateTo({
					url:'../order/submit?id='+item.room_id
				})
			},
			againTq(item){
				uni.navigateTo({
					url:'../shop/ball?id='+item.table_id
				})
			},
			
			clickComment(item){
				
				
				uni.navigateTo({
					url:'../order/comment?id='+item.id+"&mt_code="+item.mt_code+"&dou_code="+item.dou_code+"&order_no="+item.order_no+"&type=qp"
				})
				
			},
			
			clickComment2(item){
				uni.navigateTo({
					url:'../order/comment?id='+item.id+"&mt_code="+item.mt_code+"&dou_code="+item.dou_code+"&order_no="+item.order_no+"&type=tq"
				})
			},

			clickDetail(item) {
				uni.navigateTo({
					url: '../order/tableDetail?order_no=' + item.order_no
				})
			},

			overOrder(item) {
				this.currentItem = item;
				let that = this;
				uni.showModal({
					title: '提示',
					content: "您是否结束订单",
					confirmText: "结束",
					complete(res) {
						if (res.confirm) {
							that.doOver();
						}
					}
				})
			},
			doOver() {

				let param = {
					order_no: this.currentItem.order_no,
				};
				let that = this;
				this.$api.tableOverOrder(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						this.page = 1;
						this.isnodata = false;
						this.isLastPage = false;
						this.list = [];
						this.getTableList();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

			},

			detail(item) {
				uni.navigateTo({
					url: '../order/detail?order_no=' + item.order_no
				})
			},

			switchTab(index) {

				this.currentTab = index;
				if (index == 0) {
					this.status = ""
				} else if (index == 1) {
					this.status = "payed"
				} else if (index == 2) {
					this.status = "doing"
				} else if (index == 3) {
					this.status = "done"
				}
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				this.list = [];


				var token = uni.getStorageSync("token");
				console.info("==token===" + token);
				if (token != "") {
					if (this.tabIndex == 0) {
						this.getList();
					} else {
						this.getTableList();
					}
				}

			},
			clickTab(index) {
				this.tabIndex = index;
				this.page = 1;
				this.isnodata = false;
				this.isLastPage = false;
				this.list = [];

				var token = uni.getStorageSync("token");
				console.info("==token===" + token);
				if (token != "") {
					if (this.tabIndex == 0) {
						this.getList();
					} else {
						this.getTableList();
					}
				}

			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				if (this.tabIndex == 0) {
					this.getList();

				} else {
					this.getTableList();
				}
			},



			getTableList() {
				let param = {
					page: this.page,
					status: this.status
				};
				let that = this;
				this.$api.tableOrderList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			},

			getList() {
				let param = {
					page: this.page,
					status: this.status
				};
				let that = this;
				this.$api.orderList(param).then(res => {
					console.info(JSON.stringify(res));
					if (res.code == 1) {
						let length = res.data.length;
						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.orders {
		.tab {
			background-color: #FEF9E2;
			overflow: hidden;
			border-radius: 20rpx 20rpx 0 0;
			.active {
				background-color: #fff;
				color: #333;
				position: relative;
				&::after {
					content: '';
					border-top: 78rpx solid #FEF9E2;
					border-left: 44rpx solid transparent;
					border-right: 0 solid transparent;
					position: absolute;
					top: 0;
					right: 0;
				}
				&.atv {
					&::after {
						display: none;
					}
					&:before {
						content: '';
						border-top: 78rpx solid #FEF9E2;
						border-right: 44rpx solid transparent;
						border-left: 0 solid transparent;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
			}
		}
		.tabbox {
			.item {
				position: relative;
		
				.active {
					color: #333;
					font-weight: 600;
				}
		
				.icon {
					width: 38rpx;
					height: 10rpx;
					position: absolute;
					bottom: 0;
					left: calc(50% - 19rpx);
				}
			}
		}

		.list {
			height: calc(100vh - 190rpx);
			.item {
				&:first-child {
					border-radius: 0 0 20rpx 20rpx;
				}
				.status {
					color: #FABB22;
				}
				.cover {
					width: 184rpx;
					height: 264rpx;
				}
				.cover2 {
					width: 184rpx;
					height: 284rpx;
				}
				.price {
					color: #F60025;
				}
				.btn {
					border: 2rpx solid #FABB22;
					color: #FABB22;
				}
			}
		}
		
		
		
		.btn2 {
			border: 2rpx solid #FABB22;
			color: #FABB22;
		}
		.w72 {
			width: 144rpx;
			display: inline-block;
		}
		
		.w92{
			width: 204rpx;
			display: inline-block;
		}
	}
	.w17 {width: 34rpx;height: 34rpx;}
</style>